﻿@model OrderOverviewModel

@{
    var parentModel = ViewData["Parent"] as OrderListModel;
    var productId = (int?)ViewData["ProductId"];
    var customerId = (int?)ViewData["CustomerId"];
    var isOrderListPage = productId == null && customerId == null;
}

<datagrid id="orders-grid" version="2"
          attr-class='(!isOrderListPage, "h-100")'
          allow-resize="true"
          allow-row-selection="true"
          border-style="HorizontalBorders"
          sticky-footer="false"
          preserve-grid-state="true" preserve-command-state="true"
          allow-column-reordering="true">
    <datasource read="@Url.Action("OrderList", "Order", new { productId, customerId })" />
    <paging position="Bottom" show-size-chooser="true" />
    <sorting allow-unsort="true" allow-multisort="false">
        <sort by="CreatedOn" by-entity-member="CreatedOnUtc" descending="true" />
    </sorting>
    <toolbar>
        @if (isOrderListPage)
        {
            <toolbar-group>
                <button datagrid-action="DataGridToolAction.ToggleSearchPanel" type="button" class="btn btn-light btn-icon">
                    <i class="fa fa-fw fa-filter"></i>
                </button>
            </toolbar-group>

            <toolbar-group class="dropdown">
                <button type="button" class="btn btn-light btn-flat dropdown-toggle" data-toggle="dropdown" data-boundary="window">
                    @T("Admin.Common.Export.PDF")
                </button>
                <div class="dropdown-menu">
                    <a href="javascript:;" class="dropdown-item process-orders" v-bind:class="{ disabled: !grid.hasSelection }" data-url="@Url.Action("ExportPdf", "Order")">
                        <i class="far fa-fw fa-file-pdf"></i>
                        <span class="order-process-title">@T("Admin.Common.ExportToPdf.Selected")</span>
                    </a>
                    <a href="javascript:;" class="dropdown-item process-orders all-allowed" data-url="@Url.Action("ExportPdf", "Order")" data-msg="@T("Admin.Common.AskToProceed")">
                        <i class="far fa-fw fa-file-pdf"></i>
                        <span class="order-process-title">@T("Admin.Common.ExportToPdf.All")</span>
                    </a>
                </div>
            </toolbar-group>
        }
        <zone name="datagrid_toolbar_alpha"></zone>
        <toolbar-group class="omega"></toolbar-group>
        <zone name="datagrid_toolbar_omega"></zone>
        <toolbar-group class="dropdown">
            <button datagrid-action="DataGridToolAction.ReactToSelection" class="btn btn-light btn-flat dropdown-toggle no-chevron" data-toggle="dropdown" data-boundary="window">
                <i class="fa fa-fw fa-ellipsis-h"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                @{ OrdersGridMenu(false); }
            </div>
        </toolbar-group>
    </toolbar>
    @if (isOrderListPage)
    {
        <search-panel>
            <partial name="~/Areas/Admin/Views/Order/Grids/_Grid.Orders.Search.cshtml" model="parentModel" />
        </search-panel>
    }
    <columns>
        <column for="Id" halign="center" visible="false" type="string" />
        <column for="OrderNumber" hideable="false" width="auto">
            <display-template>
                @Html.LabeledOrderNumber()
            </display-template>
        </column>
        <column for="OrderGuid" visible="false" />
        <column for="CustomerName" sortable="false" title="@T("Admin.Orders.Fields.Customer")">
            <display-template>
                <div class="dg-cell-value">
                    <a v-if="!item.row.CustomerDeleted" :href="item.row.CustomerEditUrl" class="text-truncate">{{ item.row.CustomerName }}</a>
                    <div v-if="item.row.CustomerDeleted" class="text-truncate">{{ item.row.CustomerName }}</div>
                    <div class="text-truncate">{{ item.row.CustomerEmail }}</div>
                </div>
            </display-template>
        </column>
        <column for="VatNumber" visible="false" />
        <column for="ShippingStatus" entity-member="ShippingStatusId" title="@T("Admin.Orders.Shipment")">
            <display-template>
                <div class="dg-cell-value">
                    <i :class="item.row.ShippingStatusLabelClass" :title="item.row.ShippingStatusString"></i>
                    <span v-if="item.row.IsShippable" class="text-truncate">{{ item.row.ShippingAddressString }}</span>
                    <div v-if="item.row.IsShippable" class="text-muted text-truncate">{{ item.row.ViaShippingMethod }}</div>
                    <span v-if="!item.row.IsShippable" class="text-muted text-truncate">{{ item.row.ShippingStatusString }}</span>
                </div>
            </display-template>
        </column>
        <column for="CreatedOn" entity-member="CreatedOnUtc" title="@T("Order.OrderDate")">
            <display-template>
                <div class="dg-cell-value">
                    <div class="text-truncate">{{ item.row.CreatedOnString }}</div>
                    <div class="text-muted text-truncate">{{ item.row.FromStore }}</div>
                </div>
            </display-template>
        </column>
        <column for="UpdatedOn" entity-member="UpdatedOnUtc" visible="false" />
        <column for="OrderStatus" entity-member="OrderStatusId" title="@T("Admin.Orders.Fields.OrderStatus")">
            <display-template>
                <span v-bind:class="item.row.OrderStatusLabelClass" class="text-truncate">{{ item.row.OrderStatusString }}</span>
            </display-template>
        </column>
        <column for="OrderTotalString" entity-member="OrderTotal" halign="flex-end">
            <display-template>
                <div class="dg-cell-value text-right">
                    <div class="pr-2 text-truncate">
                        <big class="fwm">{{ item.row.OrderTotalString }}</big>
                        <i :class="item.row.PaymentStatusLabelClass" :title="item.row.PaymentStatusString"></i>
                    </div>
                    <div v-if="item.row.HasPaymentMethod" class="pr-2 text-muted text-truncate">{{ item.row.WithPaymentMethod }}</div>
                </div>
            </display-template>
            <footer-template>
                <div class="pr-2 text-truncate d-flex flex-column">
                    <div class="fwm mb-2 text-truncate">@T("Admin.Orders.Report.Summary"):</div>
                    @if (!(ViewBag.HideProfitReport == true))
                    {
                        <div class="text-truncate d-inline-flex justify-content-between">
                            <span class="pr-3 text-truncate">@T("Admin.Orders.Report.Profit"):</span>
                            <span class=" text-truncate">{{ item.aggregates.profit }}</span>
                        </div>
                    }
                    <div class="text-truncate d-inline-flex justify-content-between">
                        <span class="pr-3 text-truncate">@T("Admin.Orders.Report.Tax"):</span>
                        <span class=" text-truncate">{{ item.aggregates.tax }}</span>
                    </div>
                    <div class="text-truncate d-inline-flex justify-content-between">
                        <span class="pr-3 text-truncate">@T("Admin.Orders.Report.Total"):</span>
                        <span class=" text-truncate">{{ item.aggregates.total }}</span>
                    </div>
                </div>
            </footer-template>
        </column>
    </columns>
    <row-commands>
        @{ OrdersGridMenu(true); }
    </row-commands>
</datagrid>

@functions
{
    void OrdersGridMenu(bool isRowCommand)
    {
        var key = isRowCommand ? " :data-key='item.row.Id'" : string.Empty;
        <div class="dropdown-header h6 text-uppercase">
            @T("Admin.Orders.Fields.OrderStatus")
        </div>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "complete" })"@Html.Raw(key)>
            <i class="fa fa-fw fa-check"></i>
            <span class="order-process-title">@T("Enums.OrderStatus.Complete")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "cancel" })"@Html.Raw(key)>
            <i class="fa fa-fw fa-times"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.OrderStatus.Cancel")</span>
        </a>
        <div class="dropdown-divider"></div>
        <div class="dropdown-header h6 text-uppercase">
            @T("Admin.Orders.Fields.ShippingStatus")
        </div>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "ship" })"@Html.Raw(key)>
            <i class="fa fa-fw fa-truck fa-flip-horizontal"></i>
            <span class="order-process-title">@T("Enums.ShippingStatus.Shipped")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "deliver" })"@Html.Raw(key)>
            <i class="fa fa-fw"></i>
            <span class="order-process-title">@T("Enums.ShippingStatus.Delivered")</span>
        </a>
        <div class="dropdown-divider"></div>
        <div class="dropdown-header h6 text-uppercase">
            @T("Admin.Orders.Fields.PaymentStatus")
        </div>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "markpaid" })" 
           title="@T("Admin.Orders.Fields.MarkAsPaid.Hint")"@Html.Raw(key)>
            <i class="fa fa-fw"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.MarkAsPaid")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "capture" })" 
           title="@T("Admin.Orders.Fields.Capture.Hint")"@Html.Raw(key)>
            <i class="fas fa-fw fa-euro-sign"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.Capture")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "refundoffline" })" 
           title="@T("Admin.Orders.Fields.RefundOffline.Hint")"@Html.Raw(key)>
            <i class="fa fa-fw"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.RefundOffline")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "refund" })" 
           title="@T("Admin.Orders.Fields.Refund.Hint")"@Html.Raw(key)>
            <i class="fas fa-fw fa-rotate-left"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.Refund")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "voidoffline" })" 
           title="@T("Admin.Orders.Fields.VoidOffline.Hint")"@Html.Raw(key)>
            <i class="fa fa-fw"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.VoidOffline")</span>
        </a>
        <a href="javascript:;" class="dropdown-item process-orders" data-url="@Url.Action("ProcessOrder", "Order", new { operation = "void" })" 
           title="@T("Admin.Orders.Fields.Void.Hint")"@Html.Raw(key)>
            <i class="fa fa-fw fa-times"></i>
            <span class="order-process-title">@T("Admin.Orders.Fields.Void")</span>
        </a>
    }
}

<script data-origin="orders-grid">
    $(function () {

        // Order processing commands (order and payment status, PDF export...).
        $(document).on('click', '.process-orders', function (e) {
            e.preventDefault();

            var link = $(this);
            if (link.hasClass('disabled')) {
                return;
            }

            const grid = $('#orders-grid').parent().data('datagrid');
            var selectedIds = grid.selectedRowKeys;
            var allAllowed = link.hasClass('all-allowed');
            var orderId = link.data('key');
            var processWithOrderMsg = @T("Admin.Orders.ProcessWithOrder").JsValue;
			var processSelectedMsg = @T("Admin.Orders.ProcessSelectedOrders").JsValue;
            var processAllMsg = @T("Admin.Common.AskToProceed").JsValue;
            var msg = link.data('msg');

            if (orderId) {
                selectedIds = [orderId];
            }

            if (!allAllowed && selectedIds.length === 0) {
				alert2({
					message: @T("Admin.Orders.NoOrdersSelected").JsValue,
					icon: { type: 'warning' }
				});
				return;
            }

            if (!msg) {
                if (selectedIds.length === 0) {
                    msg = processAllMsg;
                }
                else if (selectedIds.length === 1) {
                    msg = processWithOrderMsg.replace('{0}', selectedIds[0]);
                }
                else {
                    msg = processSelectedMsg.replace('{0}', selectedIds.length);
                }
            }

            $({}).postData({
                url: link.data('url'),
                ask: msg,
                data: { selectedIds }
            });

            return false;
        });
    });
</script>